@import "./common.var.scss";
@import "./reset.scss";
@import "./media.scss";
@import "./hotfix.element-plus.scss";
@import "./common.class.scss";
@import "./common.extend.scss";
@import "./common.function.scss";
@import "./common.mixin.scss";

@font-face {
  font-family: "PMZD";
  src: url("@/assets/font/PMZD.ttf");
}

/** layout
 *
 */
/** 内容容器基础样式 */
.z-contain {
  margin: 0 40px;
  width: auto;
  min-width: calc($screen-min-width - 80px);
  &.z-moveup {
    position: relative;
    margin-top: -40px;
    z-index: 11;
  }
}
/** 内容卡片样式 */
.z-card {
  @extend .z-contain;
  border-radius: 10px;
  background-color: var(--card-bg);
  padding: 20px 30px;
  margin-top: 25px;
  .z-title {
    color: var(--text-color-title);
    font-size: 1.6rem;
    font-weight: 700;
    height: 2.2em;
  }
  .z-title-l {
    @extend .z-title;
    display: flex;
    align-items: center;
    &::before {
      content: "";
      width: 4px;
      height: 44%;
      background-color: var(--theme-color);
      margin-right: 10px;
    }
  }
  .z-title-c {
    @extend .z-title;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    &::before {
      content: "";
      position: absolute;
      top: 1.6em;
      width: 100%;
      height: 3px;
      transform: scaleX(92%);
      background-color: var(--theme-color);
    }
  }
}
.zip-layout-head-menus {
  height: 100%;
  display: flex;
  align-items: center;
  .zip-layout-name {
    font-family: "PMZD";
    font-size: 22px;
    color: #000;
    margin-right: 30px;
    white-space: nowrap;
  }
  .zip-layout-menus-item {
    padding: 0 30px;
    font-size: 14px;
    color: #333;
    height: 100%;
    border: none;
    outline: none;
    &.zip-layout-menus-active {
      font-weight: 700;
      color: var(--blue);
      background: #f6f7fb;
      box-shadow: 0px 3px 10px 0px rgba(17, 48, 133, 0.15) inset;
      position: relative;
      &::before {
        content: "";
        width: 100%;
        height: 4px;
        display: inline-block;
        background-color: var(--blue);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .zip-layout-icon-wrapper {
      text-align: center;
      height: 15px;
      margin-bottom: 7px;
      .zip-layout-icon {
        width: 13px;
        height: 100%;
        display: inline-block;
      }
    }
  }
}
